<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css" />
  </head>
  <style>
    .navs {
      display: flex;
      width: 360px;
      justify-content: space-between;
    }
    .nav-item {
      width: 110px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background-color: chocolate;
      border-radius: 10px;
      color: #fff;
      cursor: pointer;
    }
    .nav-active {
      background: darkviolet;
      color: cornflowerblue;
      animation: tada 1s;
    }

    .nav-item:hover {
      background: darkviolet;
      color: cornflowerblue;
    }
    .mains {
      width: 360px;
      height: 360px;
      margin-top: 20px;
    }
    .mbox {
      width: 360px;
      height: 360px;
      background: mediumpurple;
      color: orchid;
      font-size: 50px;
      border-radius: 20px;
      text-align: center;
      line-height: 360px;
      /* overflow: hidden; */
    }
    .zoom-enter-active {
      animation: zoomInDown 1.5s;
    }
    .zoom-leave-active {
      animation: zoomOutDown 1.5s;
    }
  </style>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <div>
        <div class="navs">
          <div
            class="nav-item"
            @click="changeCurrent(0)"
            :class="current==0?'nav-active':'' "
          >
            流行音乐
          </div>
          <div
            class="nav-item"
            @click="changeCurrent(1)"
            :class="current==1?'nav-active':'' "
          >
            乡村音乐
          </div>
          <div
            class="nav-item"
            @click="changeCurrent(2)"
            :class="current==2?'nav-active':'' "
          >
            轻音乐
          </div>
        </div>
        <div class="mains">
          <transition-group name="zoom" mode="out-in">
            <div class="mbox" key="0" v-show="current==0">流行音乐 - 90</div>
            <div class="mbox" key="1" v-show="current==1">乡村音乐 - 20</div>
            <div class="mbox" key="2" v-show="current==2">轻音乐 - 50</div>
          </transition-group>
        </div>
      </div>
    </div>
  </body>
  <script>
    const vm = new Vue({
      data: {
        title: "Vue - 选项卡",
        current: 0,
      },
      methods: {
        changeCurrent(index) {
          this.current = index;
        },
      },
      mounted() {
        document.querySelectorAll("title")[0].innerHTML = this.title;
      },
    }).$mount("#app");
  </script>
</html>
